<template>
	<view>
		<u-empty text="您没有权限查看" mode="permission" margin-top="200" :show="!isAdmin"></u-empty>
		
		<view class="manage-list" v-if="isAdmin">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<!-- <u-card :title="'客户总数：'+userTotal+'人'" title-color="#9e9e9e" :head-style="{borderBottom:'1rpx solid #f0f0f0'}">
				<view class="" slot="body">
					<view class="user-item" v-for="(user,index) in AllUserInfo" :key="index" @click="copyUserMobile(user)">
						<u-avatar size="large" :src="user.avatar"></u-avatar>
						<view class="user-info">
							<view class="user-name">昵称：{{user.nickname}}</view>
							<view class="user-mobile">手机号：<text class="user-mobile-text">{{user.mobile}}</text></view>
							<view class="user-last-logintime">注册时间：{{$u.timeFormat(user.register_date, 'yyyy-mm-dd hh:MM')}}</view>
							<view class="user-register-time">最后登录时间：{{$u.timeFormat(user.last_login_date, 'yyyy-mm-dd hh:MM')}}</view>
						</view>
					</view>
				</view>
				<view class="user-foot" slot="foot"><u-icon name="error" size="34" color="#fa3534" label-color="#fa3534" label="请不要外传客户信息"></u-icon></view>
			</u-card> -->
			<user-manager :userTotal="userTotal" :userInfoList="AllUserInfo"></user-manager>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				list: [{
					name: '客户管理'
				}, {
					name: '色卡管理'
				}, {
					name: '产品管理',
					count: 5
				}],
				current: 0,
				isAdmin:false
			}
		},
		onLoad() {
				const {userInfo} = this;
				if(!userInfo.role) return;
				const index = userInfo.role.indexOf("admin");
				if(index!=-1){
					this.isAdmin = true;
					this.$store.dispatch('getUserAll');
				}
		},
		computed:{
			...mapState({
				userInfo:(state)=>state.user.userInfo || {},
				AllUserInfo:(state)=>state.user.AllUserInfo || [],
				userTotal:(state)=>state.user.userTotal || 0
			}),
		},
		methods: {
			change(index) {
				this.current = index;
			},
			copyUserMobile(user){
				uni.setClipboardData({
					data: user.mobile,
					showToast:true,
					success: function () {
						
					}
				});
			}
		}
	}
</script>
<style>
	page{
		background-color: #f0f0f0;
	}
</style>
<style scoped lang="scss">
.user-item{
	display: flex;
	align-items: center;
	padding: 15rpx 0;
	border-bottom:1rpx solid #f0f0f0;
	.user-info{
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		color: #9e9e9e;
		font-size: 18rpx;
		.user-mobile{
			.user-mobile-text{
				color:#fa3534;
				font-size: 26rpx;
			}
			
		}
	}
}
.user-foot{
	// padding-top: 0;
	// border-top: 1px solid #f0f0f0;
}
</style>